<template>
  <div class="customer_for_code_detail">
    <Row justify="space-between">
      <Col span="20">
        <label class="label">
          活动名：
          <span>{{ info.activityName }}</span>
        </label>
        <label class="label">
          开始时间：
          <span>{{ info.createTime }}</span>
        </label>
      </Col>
      <Col>
        <Button type="primary" style="margin-left: 10px" @click="exportExcel" v-if="unlocking('0107100501')">
          导出excel
        </Button>
      </Col>
    </Row>
    <Row>
      <Col span="20">
        <label class="label" style="width: 80px">汇总数据：</label>
        <label class="label">
          活动扫码数：
          <span>{{ info.visitsNum }}</span>
        </label>
        <label class="label">
          活动线索客户数：
          <span>{{ info.newClues }}</span>
        </label>
        <label class="label">
          活动转到访：
          <span>{{ info.visitCustomer }}</span>
        </label>
        <label class="label">
          活动签订：
          <span>{{ info.signCustomer }}</span>
        </label>
      </Col>
    </Row>
    <dt-grid ref="table" :onFetch="onFetch" :select="{ sort: sortCase }" />
  </div>
</template>

<script>
  import columnOpt from './opt/column.js'
  import activityMgr from '@/biz/customerForCode/activity'

  export default {
    data() {
      return {
        visitsNumSort: '',
        newCluesSort: '',
        visitCustomerSort: '',
        signCustomerSort: '',
        filterParams: null,
        info: {}
      }
    },
    methods: {
      sortCase(sort) {
        if (sort.prop == '_txt_visitsNum') {
          this.visitsNumSort = sort.order || ''
        } else {
          this.visitsNumSort = ''
        }
        if (sort.prop == '_txt_newClues') {
          this.newCluesSort = sort.order || ''
        } else {
          this.newCluesSort = ''
        }
        if (sort.prop == '_txt_visitCustomer') {
          this.visitCustomerSort = sort.order || ''
        } else {
          this.visitCustomerSort = ''
        }
        if (sort.prop == '_txt_signCustomer') {
          this.signCustomerSort = sort.order || ''
        } else {
          this.signCustomerSort = ''
        }
        this.$refs.table.fetch()
      },
      onFetch(data) {
        console.log(data)
        let params = {
          id: this.$route.query.activityId,
          userIds: data.userIds ? [data.userIds] : [],
          roleIds: data.roleIds,
          buildingId: this.$dt.buildInfo().housesId,
          visitsNumSort: this.visitsNumSort,
          newCluesSort: this.newCluesSort,
          visitCustomerSort: this.visitCustomerSort,
          signCustomerSort: this.signCustomerSort,
          activityType: 1
        }
        this.filterParams = params
        return activityMgr.detail(params).then((res) => {
          return res
        })
      },
      getCount() {
        let params = {
          id: this.$route.query.activityId,
          activityType: 1
        }
        activityMgr.count(params).then((res) => {
          this.info = res
        })
      },
      exportExcel() {
        activityMgr.detailExport(this.filterParams)
      }
    },
    mounted() {
      this.$refs.table.init(this, new columnOpt.detailColumn(this))
      this.$refs.table.fetch()
      this.getCount()
    }
  }
</script>

<style lang="scss" scoped>
  .customer_for_code_detail {
    padding: 20px;

    .label {
      line-height: 32px;
      display: inline-block;
      width: 20%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }
</style>
